<script type="text/x-template" id="cc-keyval-convert-json-el">
    <div>
        <el-form ref="keyvalConvertJsonForm" :rules="rules" :model="keyvalConvertJsonTableFormData" label-width="170px">
            <el-form-item label="keyVal键值对数据" prop="keyvalData">
                <el-input
                        type="textarea"
                        v-model="keyvalConvertJsonTableFormData.keyvalData"
                        :rows="6"
                        placeholder="请输入key:val键值对数据"
                        clearable
                >
            </el-form-item>
            <el-form-item label="转化后Json" prop="jsonData">
                <el-input
                        type="textarea"
                        v-model="keyvalConvertJsonTableFormData.jsonData"
                        :rows="6"
                        disabled
                >
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handleCopyData(keyvalConvertJsonTableFormData.jsonData)" style="width: 200px">复制转化后的Json</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</script>

<script>
    Vue.component('cc-keyval-convert-json-el', {
        template: '#cc-keyval-convert-json-el',
        data() {
            return {
                keyvalConvertJsonTableFormData: {
                    keyvalData: '',
                    jsonData: '',
                },
                rules: {
                    keyvalData: [
                        {required: true, message: '请输入要转化的key:val'}
                    ]
                }
            }
        },
        computed: {},
        methods: {
            handleSubmit: function () {
                this.$refs.keyvalConvertJsonForm.validate(function (valid) {
                    if (valid) {
                        this.handleLayoutConvert()
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            resetForm: function () {
                //重置按钮
                this.$refs.keyvalConvertJsonForm.resetFields();
            },
            handleLayoutConvert: function () {
                var jsonData = this.handleKeyVal2Json(this.keyvalConvertJsonTableFormData.keyvalData);
                this.keyvalConvertJsonTableFormData.jsonData = jsonData;

            },
            handleKeyVal2Json: function (keyValueStr) {
                let result = {};
                let list = keyValueStr.split("\n");
                let index = 0;
                let size = list.length;
                for (; index < size; index++) {
                    let pair = list[index];
                    if (pair === '') {
                        continue;
                    }
                    let keyVal = new Array();
                    keyVal = pair.split(":");
                    if (keyVal[0] !== '' || keyVal[1] !== '') {
                        result[keyVal[0].trim()] = keyVal[1].trim();
                    }
                }
                return JSON.stringify(result);
            }
        },
        watch: {
            'keyvalConvertJsonTableFormData.keyvalData': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        this.handleSubmit();
                    }
                }
            }
        },
        mounted() {

        },
        created() {
        }
    })
</script>
